<template>
	<view class="content">
		<image class="logo" src="../../static/tarbar/volunteer.png"></image>
		<view class="input-group">
			<view class="input-row border">
				<text class="title">账号：</text>
				<m-input type="text" clearable focus v-model="account" placeholder="请输入账号"></m-input>
			</view>
			<view class="input-row">
				<text class="title">密码：</text>
				<m-input type="password" displayable v-model="password" placeholder="请输入密码"></m-input>
			</view>

		</view>
		<view class="btn-row">
			<button class="bg-aaa cu-btn  block lg" @tap="bindLogin">登录</button>
			<button></button>

		</view>
		<view class="action-row" style="margin-top: 200rpx;">
			<navigator url="../reg/reg">注册账号cc</navigator>
			<text>|</text>
			<navigator url="../pwd/pwd">忘记密码</navigator>
		</view>
	</view>

</template>

<script>
	import {
		mapMutations
	} from 'vuex'

	import mInput from '../../component/m-input.vue'

	export default {
		components: {
			mInput
		},

		data() {
			return {
				providerList: [],
				hasProvider: false,
				account: '',
				password: '',
				positionTop: 0,
				isDevtools: false,
			}
		},
		// computed: mapState(['forcedLogin']),
		methods: {
			initPosition() {
				/**
				 * 使用 absolute 定位，并且设置 bottom 值进行定位。软键盘弹出时，底部会因为窗口变化而被顶上来。
				 * 反向使用 top 进行定位，可以避免此问题。
				 */
				this.positionTop = uni.getSystemInfoSync().windowHeight - 100;
			},
			async addUser(userInfo) {
			
				uni.setStorageSync(USERS_KEY, JSON.stringify(users));
			},

			async bindLogin() {
				const baseurl = getApp().globalData.BASE_URL
				uni.request({
					url: baseurl + "/user/login",
					data: {
						username: this.account,
						password: this.password
					},
					success(res) {
						console.log("请求成功", res)
						if (res.statusCode == 200) {
							uni.setStorageSync("USERS_KEY", JSON.stringify(res.data));
							uni.setStorageSync("isLogin",true);
							
							uni.showToast({
								icon: 'success',
								title: "登录成功",
							})
							uni.reLaunch({
								url:"../index/index"
							})
						} else {
							uni.showToast({
								icon: 'none',
								title: res.data
							})
						}

					},
					fail(res) {
						console.log("请求失败", res)
					}

				})
				
			},



			// ============================methods endline===================================
		},
		onReady() {
			this.initPosition();
		}
	}
</script>

<style lang="scss">
	.action-row {
		display: flex;
		flex-direction: row;
		justify-content: center;
		color: #e84351;
	}

	.action-row navigator {
		color: #e84351;
		padding: 0 10px;
	}

	.logo {
		width: 250upx;
		height: 250upx;

		margin: 50px auto 20px auto;
	}

	.my-cion {
		background-color: #e84351;
		color: #ffffff;
	}

	.content {
		display: flex;
		flex: 1;
		flex-direction: column;
		background-color: #f8f8f8;
		padding: 10px;
	}

	.input-group {
		background-color: #ffffff;
		margin-top: 20px;
		position: relative;
	}

	.input-group::before {
		position: absolute;
		right: 0;
		top: 0;
		left: 0;
		height: 1px;
		content: '';
		-webkit-transform: scaleY(.5);
		transform: scaleY(.5);
		background-color: #c8c7cc;
	}

	.input-group::after {
		position: absolute;
		right: 0;
		bottom: 0;
		left: 0;
		height: 1px;
		content: '';
		-webkit-transform: scaleY(.5);
		transform: scaleY(.5);
		background-color: #c8c7cc;
	}

	.input-row {
		display: flex;
		flex-direction: row;
		position: relative;
		font-size: 18px;
		line-height: 40px;
	}

	.input-row .title {
		width: 72px;
		padding-left: 15px;
		color: #e84351;
	}

	.input-row.border::after {
		position: absolute;
		right: 0;
		bottom: 0;
		left: 8px;
		height: 1px;
		content: '';
		-webkit-transform: scaleY(.5);
		transform: scaleY(.5);
		background-color: #c8c7cc;
	}

	.btn-row {
		padding: 30px 0;
	}

	button.lg {}
</style>
